<template>
  <div class="auth-revoke-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">授权撤销</h1>
    </div>

    <!-- 用户信息卡片 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-8 max-w-4xl mx-auto">
      <div class="grid grid-cols-2 gap-6">
        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            申请人
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            周宇轩
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            申请单位
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            jrlc
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            设备标识
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            xxxxxxxxx
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            撤销备注
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3">
            <el-input 
              v-model="revokeReason" 
              placeholder="请输入撤销原因"
              type="textarea"
              :rows="1"
            />
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            授权证书编号
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            123321
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            撤销时间
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            2025/10/30
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex gap-4 justify-center mt-8">
        <el-button type="primary" size="large" @click="submitRevoke" class="w-32">
          撤销下发
        </el-button>
        <el-button size="large" @click="cancel" class="w-32">
          取消
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

const revokeReason = ref('因为xxx原因')

const submitRevoke = () => {
  ElMessageBox.confirm('确定要撤销该授权吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('授权撤销成功')
    setTimeout(() => {
      router.push('/authorization/list')
    }, 500)
  }).catch(() => {})
}

const cancel = () => {
  router.back()
}
</script>

<style scoped>
.auth-revoke-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.el-textarea__inner) {
  resize: none;
}
</style>

